<template>
  <div class="app-container">
    <div v-show="active === 1">
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
          <el-row :gutter="6">
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dealerName" label="代理商名称">
                <el-input v-model="search.dealerName" placeholder="代理商名称" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="dataType" label="代理商类型">
                <r-select v-model="search.dataType" type="4508" placeholder="代理商类型" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="employeeName" label="员工姓名">
                <el-input v-model="search.employeeName" placeholder="员工姓名" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="employeeNo" label="员工编号">
                <el-input v-model="search.employeeNo" placeholder="员工编号" clearable />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="userCode" label="用户帐号">
                <el-input v-model="search.userCode" placeholder="员工帐号" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="phone" label="手机">
                <el-input v-model="search.phone" placeholder="手机" clearable/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="8" :md="6">
              <el-form-item prop="isOnjob" label="在职状态">
                <el-select v-model="search.isOnjob" :clearable="true" placeholder="请选择" >
                  <el-option v-for="item in isOnjob" :key="item.code" :label="item.name" :value="item.code">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div style="text-align:right">
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>
      <!-- 用户列表 -->
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">员工信息</div>
          <div class="btnGroup">
            <el-button-group>
              <el-button :loading="exportLoading" type="primary" icon="el-icon-download" @click="exportData">导出</el-button>
            </el-button-group>
          </div>
        </div>
        <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
          <el-table-column type="index" label="序号" min-width="50"/>
          <el-table-column prop="EMPLOYEE_NO" label="员工编号" min-width="120" />
          <el-table-column prop="USER_CODE" label="员工帐号" min-width="120" />
          <el-table-column :show-overflow-tooltip="true" prop="EMPLOYEE_NAME" label="员工姓名" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="DEALER_NAME" label="代理商名称" min-width="150"/>
          <el-table-column :formatter="filterCode" label="代理商类型" prop="DATA_TYPE" type="4508"/>
          <el-table-column prop="ROLE_NAME" label="管理岗位" min-width="100"/>
          <el-table-column :formatter="filterCode" prop="GENDER" label="性别" min-width="50" type="1002"/>
          <!--          <el-table-column :formatter="filterCode" prop="POSITION_CODE" label="职位" min-width="100" type="1007"/>-->
          <el-table-column :show-overflow-tooltip="true" prop="CERTIFICATE_ID" label="身份证号" min-width="150"/>

          <el-table-column prop="MOBILE" label="手机" min-width="120"/>
          <el-table-column prop="IS_ONJOB" label="在职状态" min-width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.IS_ONJOB === 10081001 ? 'success' : 'primary'">{{ scope.row.IS_ONJOB |
              isonjobFilter }}
              </el-tag>
            </template>
          </el-table-column>
        </BaseTable>
      </div>
    </div>

  </div>
</template>

<script>
// import {
//   msg,
//   getJsonTree
// } from '@/utils/index'
import {
  getDealerUsersList2,
  exportDeaEmpForSearch2
} from '@/api/admin/org/gms/employeeInfo'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import PositionTypeSelect from '@/components/Select/positionTypeSelect'
import WorkGroupSelect from '@/components/Select/workGroupSelect'
import WorkerTypesSelect from '@/components/Select/workerTypesSelect'
import RepairPositionsSelect from '@/components/Select/repairPositionsSelect'
import rSelect from '@/components/Select/Select'
import formMixins from '@/mixins/formMixins'
import Gender from '@/components/Select/gender'
import IsOnjob from '@/components/Select/isOnjob'
import departmentSelect from './departmentSelect'
import dealerSelect from './dealerSelect'
import { exportFile } from '@/utils'
export default {
  name: 'DealerManagerConsultant',
  components: {
    BaseTable,
    PositionTypeSelect,
    WorkGroupSelect,
    WorkerTypesSelect,
    RepairPositionsSelect,
    rSelect,
    Gender,
    IsOnjob,
    filtercode,
    departmentSelect,
    dealerSelect
  },
  // 过滤器
  filters: {
    isonjobFilter(val) {
      return val === 10081001 ? '在职' : '离职'
    },
    isYESORNO(val) {
      return val === 10041001 ? '是' : '否'
    },
    datasourcesFilter(val) {
      return val === 10451001 ? '店面' : '厂端'
    },
    genderFilter(val) {
      if (val === 10021001) {
        return '男'
      }
      if (val === 10021002) {
        return '女'
      }
      if (val === 10021003) {
        return '未知'
      }
    }
  },
  mixins: [formMixins],
  data() {
    return {
      multipleSelection: [],
      ROLES: [],
      active: 1,
      mode: ['1', '2'],
      way: '',
      text: '',
      bol: false,
      bols: true,
      exportLoading: false,
      dialogFormVisible: false,
      passwordDialogFormVisible: false,
      addSearch: {
        empIds: '',
        newPassword: '',
        checkPass: ''
      },
      // 在职状态
      isOnjob: [{
        code: 10081001,
        name: '在职'
      },
      {
        code: 10081002,
        name: '离职'
      }
      ],
      search: {
        limit: 10,
        pageNum: 1,
        employeeName: '',
        dealerName: '',
        dataType: '',
        userCode: '',
        orgName: '',
        isOnjob: '',
        employeeNo: '',
        phone: ''
      },
      checkedList: [],
      sites: [],
      organization: {
        ORGANIZATION_ID: '',
        ORG_NAME: ''
      },
      key: '',
      tree: [],
      loading: false,
      dealercode: '',
      dealerDis: false,
      dealerName: '',
      isST: false
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询
    searchHandle() {
      const table = this.$refs['table']
      table.wait()
      getDealerUsersList2(this.search)
        .then(res => {
          table.complete().filData(res)
          this.dealercode = res.rows[0].DEALER_CODE
        })
        .catch(err => {
          table.complete()
        })
    },
    // 导出Excel(前端实现)
    exportData() {
      this.exportLoading = true
      exportDeaEmpForSearch2(this.search)
        .then(res => {
          const option = {
            tHeader: ['员工编号', '员工帐号', '员工姓名', '代理商', '代理商代码', '岗位', '性别', '出生日期', '身份证号',
              '手机', 'E_MAIL', '邮编', '在职状态', '离职日期', '建档日期', '地址'],
            filterVal: ['EMPLOYEE_NO', 'USER_CODE', 'EMPLOYEE_NAME', 'DEALER_NAME', 'DEALER_CODE', 'ROLE_NAME', 'GENDER', 'BIRTHDAY', 'CERTIFICATE_ID',
              'PHONE', 'E_MAIL', 'ZIP_CODE', 'IS_ONJOB', 'DIMISSION_DATE', 'FOUND_DATE', 'ADDRESS'],
            table: res,
            fileName: '员工信息明细'
          }
          exportFile(option, () => {
            this.exportLoading = false
          })
        })
        .catch(err => {})
    }
  }
}

</script>

<style scoped>
</style>

